<template>
  <div id="app1">
  <a href="#">xxxxxxxxxxxxxxx</a>
    <img src="./assets/logo.png">
    <el-button       v-on:click="jump">el-button</el-button>
    <div id="nav">
    <!--
      <li @click="routerLink(0,'/')" class="nav-item"   :class="navIndex === 0 ? 'item-cn item-cn-active' : 'item-cn'">Home</li> |
   <li  @click="routerLink(1,'/about')"  class="nav-item"  :class="navIndex === 1 ? 'item-cn item-cn-active' : 'item-cn'" >About</li>
      </ul>-->
   <router-link to="/" exact>Home</router-link > |
   <router-link   to="about" >About</router-link >
    </div>
    <router-view/>
    
  </div>
</template>

<script>

/*import HelloWorld from './components/HelloWorld.vue'*/

export default {
  name: 'app1',
/* components: {
       HelloWorld
  },*/
 methods: {
        jump: function () {
          
           this.$router.replace('/about')
       }
     
    }
 
  }
/*,
      methods: {
        jump: function () {
           console.error("aaaaa")
           this.$router.replace('/about')
       }
       v-on:click="jump"
    }*/
</script>
<style lang="css">
#app1 {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;

 

  margin-top: 60px;
}
 a{
     color: #42b983;
 }
.router-link-active {			  text-align: center;			  position: relative;			  display: inline-block;			  font-size: 14px;			  line-height: 25px;			
      color: #2d8cf0;}    
.router-link{
  text-align: center;			  position: relative;			  display: inline-block;			  font-size: 14px;			  line-height: 25px;
}
</style>
